<template>
	<view style="overflow: hidden;min-height: 100%; background-color: #f8f8f8;">
		<!-- 导航栏 -->
		<order-header class="custom-navbar" title="发票单详情" 
			:image="info.state == 1 ? '/static/common/daikaipiao.png':'/static/common/kaipiaowancheng_small.png'"
			:status="statusText(info.state)"
			@back="navBack"
			>
		</order-header>
		<!-- 导航栏占位盒子 -->
		<!-- #ifdef APP-PLUS -->
		<view  :style="{height:  '240rpx',marginTop:statusBarHeight+'rpx'}"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view :style="{height:  '240rpx'}"></view>
		<!-- #endif -->
		<view class="u-p-l-30 u-p-t-30 u-p-r-30" >
			<!-- 卖家信息 -->
			<view class="u-p-l-35 u-p-r-35 u-p-t-30 u-p-b-30 u-m-b-20" style="background-color: #FFFFFF;" >
				<view class="u-font-bold u-font-28">{{info.sellerName}}</view>
				<view class="fui-oh__wrap">
					<fui-overflow-hidden :size="28" type="2" gradientColor="#FFFFFF"
						height="200rpx" :visible="visible">
						<view style="width: 100%;box-sizing: border-box;">
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="font-weight: 500;">
									采购商发票信息
								</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">名称</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.buyerName}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">纳税人识别号 </view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.buyerIdentityNo}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">地址</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.buyerAddress}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">电话</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.buyerTelNo}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">开户行</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.buyerBankName}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">银行账号</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.buyerBankAccountNo}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">发票邮寄地址</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{info.deliveryAddress}}</view>
							</view>
							<view class="u-flex u-m-t-10 u-row-between">
								<view class="u-font-28" style="color: #999;">开票类型</view>
								<view class="u-font-28 u-text-right" style="color: #999;">{{ info.isProfessional?'增值税专用发票':'增值税普通发票' }}</view>
							</view>
						</view>
					</fui-overflow-hidden>
					<view class="u-flex u-row-center" @click="readMore">
						<text class="u-font-24 u-font-grey">{{visibleText}}</text>
						<fui-icon :name="'arrowdown'" color="#999" size="32" :style="{transform:visible?'rotate(180deg)':'rotate(0deg)'}"></fui-icon>
						<!-- :style="{transform:visible?'ro':}" -->
					</view>
				</view>
			</view>
			<!-- 支付凭证 -->
			<!-- <view class="u-p-l-35 u-p-r-35 u-p-t-30 u-p-b-30 u-m-b-20" style="background-color: #FFFFFF;" 
			v-if="info.resources.length!=0">
				<view class="u-font-32 u-m-b-30">附件</view>
				<fui-upload immediate
					class="u-m-t-20"
					:file-list="fileList"
					:url="baseUrl + 'api/Resource/UploadToOss'"
					:height="133"
					:width="'133rpx'"
					:max="maxPayResource"
					keepOne
					>
				</fui-upload>
			</view> -->
			<view class="box-color box-padding u-m-b-20" >
				<view class="u-m-b-30 u-font-32" >附件</view>
				<view style="display: flex;flex-wrap: wrap;margin-top: 30rpx;" v-if="info.resources.length!==0">
					<image :src="item.url" v-for="(item,index) in info.resources" :key="index" style="width: 140rpx;height: 140rpx;border-radius: 5rpx;margin-right: 20rpx;"
					 mode="" @click="previewImg(index)"></image>
				</view>
				<view class="u-text-center grey-color" v-else>没有可查看的附件~</view>
			</view>
			<!-- 新建订单 -->
			
			<view class="u-bg-white u-p-30">
				<view class="u-flex u-row-between">
					<text class="u-font-28 u-font-bold">订单明细</text>
					<text class="u-font-28 u-theme-main u-m-l-10">实付款{{info.amount}}</text>
				</view>
			</view>
			<!-- 订单详情列表 -->
			<fui-collapse  event-type="close"  @change="itemChange" :head-style="{'padding':0}" :accordion="false">
				<fui-collapse-item :index="index" :name="item.id" :arrow="false"  v-for="(item, index) in info.trades" :key="item.id" >
						<view class="u-p-l-35 u-p-r-35 u-p-t-30 u-p-b-30  u-flex u-row-between" slot="title-all" style="background-color: #fff;width: 100%;">
							<view class="">
								<view class="u-font-30" style="color: #333333;">{{item.tradeNo}}</view>
								<view class="u-m-t-10 u-m-b-10">
									<text class="u-font-24" style="color: #999999;">{{$u.timeFormat(item.createdTime,'yyyy-mm-dd hh:ss') }}</text>
									<text class="u-font-24 " style="color: #FF551A;margin-left: 30rpx;">{{orderStatus[item.state]}}</text>
								</view>
								<view class="u-font-32" style="color: #FF551A;">￥{{item.actualAmount}}</view>
							</view>
							<view class="">
								<image src="/static/order/payorderDel.png" v-if="info.paymentStatus == 0&&isCollection" class="payorder-list-image u-m-r-40" @click.stop="showDelModel(item.id)"></image>
								<image src="/static/order/payorderOpen.png" :class="{'payorder-list-image':true,'payorder-list-image-active':openList[index]}" ></image>
							</view>
						</view>
						<template v-slot:content>
							<view class="collapse-item u-p-l-35 u-p-r-35 u-p-t-10 u-p-b-20" style="background-color: #FFFFFF;">
								<view class="u-flex u-row-between u-m-b-20" v-for="orderItem in item.items" :key="orderItem.id">
									<view class="u-flex u-col-top">
										<image :src="orderItem.url" mode="" style="width: 80rpx;height: 80rpx;"></image>
										<text class="u-font-28 u-m-l-20 u-line-1" style="width: 300rpx;">{{orderItem.itemName}}</text>
									</view>
									<view class="u-flex u-flex-wrap u-row-right" style="height: 100%;align-content: space-between;">
										<view class="u-font-28" style="color: #333;width: 100%;text-align: right;">￥{{orderItem.actuallyPrice}}</view>
										<view class="u-font-24 u-flex u-col-bottom  u-row-center" style="background-color: #F7F7F7;color: #999;padding: 7rpx 14rpx;">
											x{{orderItem.quantity}}
										</view>
									</view>
								</view>
								<view>
									<view class="u-flex u-m-t-16 u-row-between">
										<view class="u-font-28" style="color: #999;">总金额</view>
										<view class="u-font-28 u-text-right" style="color: #999;">￥{{item.amount}}</view>
									</view>
									<view class="u-flex u-m-t-10 u-row-between">
										<view class="u-font-28" style="color: #999;">红包</view>
										<view class="u-font-28 u-text-right" style="color: #999;">-￥{{item.balanceReduction}}</view>
									</view>
									<view class="u-flex u-m-t-10 u-row-between">
										<view class="u-font-28" style="color: #999;">活动</view>
										<view class="u-font-28 u-text-right" style="color: #999;">-￥{{item.promotionReduction}}</view>
									</view>
									<view class="u-flex u-m-t-10 u-row-between">
										<view class="u-font-30" style="color: #666;">折后金额</view>
										<view class="u-font-30 u-text-right" style="color: #666;">￥{{item.actualAmount}}</view>
									</view>
								</view>
							</view>
						</template>
					
				</fui-collapse-item>
			</fui-collapse>
		</view>
		<!-- 占位盒子 -->
		<view style="height: 160rpx;" v-if="isCollection"></view>
		<!-- 底部固定客服 -->
		<view class="footer u-flex"  v-if="info.state == 1&&isCollection">
			<fui-button text="取消发票单" class="u-m-r-20"  @click="modalShow = true" height="80rpx" width="100%" radius="45rpx" size="32" background="#F8F8F8" color="#999"></fui-button>
		<fui-button text="开票"  class="u-m-r-20" @click="openInvoiceBtnClick()" 
		height="80rpx" width="100%" radius="45rpx" size="32" background="#FFECBF" color="#FFBB1A"></fui-button>
		</view>
		<fui-modal title="提示" :show="modalShow" :descr="modalContent" maskClosable @click="handleCancel" @cancel="modalShow = false">
			<view class="u-p-l-30 u-p-r-30" style="width: 100%;">
				<fui-textarea v-model="cancelReason" placeholder="请输入取消原因" borderColor="#ffbb1a" height="100rpx" textareaBorder type="textarea" size="28" border></fui-textarea>
			</view>
		</fui-modal>
		<u-popup v-model="openInvoiceShow" mode="bottom" safe-area-inset-bottom class="create-invoice-pop"	>
			<view style="min-height:900rpx;" class="u-p-l-35 u-p-r-35">
				<view class="u-text-center choose-buyer-title u-font-32" >
					开票
				</view>
				<view class="u-flex u-p-b-30" style="border-bottom: 1rpx solid #E7E7E7;">
					<view class="text-bold u-font-30 u-m-r-40">开票方式</view>
					<u-radio-group v-model="invoiceType">
						<u-radio label-size="26" active-color="#ffbb1a"	:name="0" class="u-font-26">增值税普通发票</u-radio>
						<u-radio label-size="26" active-color="#ffbb1a" :name="1">增值税专用发票</u-radio>
					</u-radio-group>
				</view>
				<view class=" u-p-t-30" style="min-height: 500rpx;">
					<view class="text-bold u-font-30 u-m-b-20">上传附件（最多5张）</view>
					<fui-upload immediate
						class="u-m-t-20"
						:file-list="fileList"
						:url="baseUrl + 'api/Resource/UploadToOss'"
						:height="133"
						:width="'133rpx'"
						:max="5"
						keepOne
						@success="e=>onSuccess(e,1)"
						@delete="onRemove"
						>
					</fui-upload>
					<view class="grey-color u-font-32 u-m-t-20" >请上传发票照片、物流照片等相关凭证</view>
				</view>
				
				<view class="u-m-t-40 u-m-b-20" style="background-color: #fff;">
					<u-button  @click="openInvoiceFn(true)" plain shape="circle" 
					:hair-line="false" hover-class="none"  :disabled="invoicePictures.length==0" :custom-style="{background:invoicePictures.length==0?'#ccc':'#ffbb1a',border:'none'}" >完成开票</u-button>
					<view class="u-text-center u-m-t-20">
						<text class="" :style="{color:invoicePictures.length==0?'#ccc':'#333'}" @click="openInvoiceFn(false)">暂存</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import { useUserStore } from '@/store/user.js';
	import { useShopStore } from '@/store/shop.js';
	import { orderStore } from '@/store/order.js';
	import { mapState } from 'pinia';
	import OrderHeader from '@/components/order-header.vue';
	import snLine from '@/components/sn-line.vue';
	export default {
		components: {
			OrderHeader,snLine
		},
		data() {
			return {
				detailShow:false,
				id: null,
				alipayDom: '',
				modalShow: false,
				modalContent: '是否确认取消发票单',
				delPayOrderShow:false,
				delContent:'您是否确定将此订单从发票单中移除？',
				delOrderId:'',
				orderStatus:['待付款','待发货','待收货','待评价','已完成','已取消'],
				payMethodStatus:['微信支付','支付宝支付','银联支付','线下支付','线下支付'],
				info: {
					resources:[]
				},
				state: 0,
				statusInfo: {},
				payTypeShow: false,
				paymentMethod: null,
				expire: '',
				expireTimer: undefined,
				isGoPay:false,
				loading:false,
				maxPayResource:1,
				delResource:false,
				payList:[],
				openList:[],
				offlineSet:{},
				fileList: [],
				routeFrom:"",
				routeOrderId:'',
				resourceList:[],
				visible:false,
				visibleText:'展开详情',
				cancelReason:'',
				invoicePictures: [],
				openInvoiceShow:false,
				invoiceType:0,
			}
		},
		computed:{
			...mapState(useUserStore,{
				isCollection:'isCollection',
				header: (state)=>{
					Authorization: 'Bearer ' + state.user.access_token
				}
			}),
			...mapState(useShopStore, {
				storeShop: 'shop',
			})	
		},
		async onLoad(options) {
			this.id = options.id;
			this.routeFrom = options.routeFrom;
			this.routeOrderId = options.orderId
			await this.getOrderDetail()
		},
		methods: {
			// 完成开票或暂存发票信息
			async openInvoiceFn(isSubmit){
				if(this.invoicePictures.length <1){
					return this.$u.toast('至少上传一张发票图片')
				}
				uni.showLoading({
					title: 'loading...',
				});
				let params = {
					id:this.id,
					resourceIds:this.invoicePictures,
					isProfessional:this.invoiceType,
					submit:isSubmit
				}
				let res = await this.$newHttp.put('api/v1.3/Invoice/SellerDoInvoicing', params);
				uni.hideLoading({
					title: 'loading...'
				});
				if(res.code === 200){
					this.$u.toast(isSubmit?'开票完成~':'暂存开票信息成功~');
					this.openInvoiceShow = false;
					this.getOrderDetail();
				}else{
					this.$u.toast((isSubmit?'生成发票失败，错误信息：':'暂存开票信息失败，错误信息：')+res.erroMessage);
				}
			},
			async onSuccess(e) {
				let data = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				console.log(data);
				this.invoicePictures.push(data.data[0].id);
			},
			async onRemove(data) {
				this.invoicePictures.splice(data,1);
			},
		
			openInvoiceBtnClick(){
				if(!this.isCollection){
					return this.$u.toast('当前账号没有开发票的权限')
				}
				if (this.info.resources.length!==0){
					let ids = [];let imgs = [];
					this.info.resources.forEach(item=>{
						ids.push(item.id);
						imgs.push(item.url);
					})
					this.fileList = imgs;
					this.invoicePictures = ids;
				}
				this.openInvoiceShow = true;
			},
			previewImg(index) {
				const imageArr = this.info.resources.map(item=>{return item.url});
				uni.previewImage({
					current: index,
					urls: imageArr
				})
			},
			statusText(state){
				if(state == 1){
					return '待开票'
				} 
				if(state == -1){
					return '已取消'
				}
				return '开票完成'
			},
			readMore() {
				if (this.visible) {
					this.visible = false
					this.visibleText = '展开详情'
				} else {
					this.visible = true
					this.visibleText = '收起详情'
				}
			},
			itemChange(data){
				this.$set(this.openList,data.index,data.isOpen)
			},
			async handleCancel(e) {
				if(!this.isCollection){
					return this.$u.toast('当前账号没有开发票的权限')
				}
				if(e.index ===1){
					this.loading = true;
					if (this.cancelReason =='') {
						this.loading = false;
						return uni.$fui.toast('取消原因不得为空~')
					};
					const res = await this.$newHttp.put('api/v1.3/Invoice/SellerCancelInvoice',{ id: this.info.id,cancellationReason:this.cancelReason });
					this.loading = false;
					if(res.code === 200){
						this.back();
					}else{
						uni.$fui.toast(res.erroMessage)
					}
				}
				this.modalShow = false;
			},
			// 获取发票单详情
			async getOrderDetail() {
				this.loading = true;
				let params = {
					id: this.id,
					shopId:this.storeShop.id,
				}
				const res = await this.$newHttp.get('api/v1.3/Invoice/SellerGetInvoiceDetail', {params: params});
				this.loading = false;
				if(res.code == 200){
					this.info = res.data;
					this.resourceList = res.data.resources;
					this.maxPayResource = res.data.resources.length;
				}else{
					uni.showToast({
						title:'获取发票单详情失败，错误信息：'+res.erroMessage
					})
				}
				
			},
			navBack(){
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				if(beforePage.route === 'pages/sale/order/detials'){
					uni.navigateBack(); 
				}else{
					this.$mRouter.redirectTo({
						route: '/pages/sale/invoiceOrder/index'
					})
				}
			},
			back() {
				if(this.routeFrom == 'order'){
					this.$mRouter.redirectTo({
						route: '/pages/sale/order/details?id='+this.routeOrderId
					})
				}else{
					this.$mRouter.redirectTo({
						route: '/pages/sale/invoiceOrder/index'
					})
				}
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.add-btn{
			width: 100rpx;
			height: 100rpx;
			background-color: #FFBB1A;
			margin-right: 30rpx;
			z-index: 11;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow:  0rpx 0rpx 30rpx rgba(144,144,144,0.3);
		}
		.payorder-list-image{
			width: 42rpx;
			height: 42rpx;
			transition:transform .8s ;
		}
		.payorder-list-image-active{
			transform: rotateX(180deg);
			transition:transform .8s ;
		}
		.footer {
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			z-index: 9;
			width: 100%;
			height: 160rpx;
			padding: 0 30rpx;
		}
		.choose-buyer-title{
			position: relative;
			line-height: 100rpx;height: 100rpx;font-weight: bold;
		}
</style>
